// import React, { useState, useEffect } from 'react';
// import axios from 'axios';
// import { Popup, Cell } from '@nutui/nutui-react'
// import '@nutui/nutui-react/dist/style.css'
// import { Input } from '@nutui/nutui-react'
// import { InputNumber } from '@nutui/nutui-react'
// import { sleep } from 'antd-mobile/es/utils/sleep'

// axios.defaults.baseURL = 'http://127.0.0.1:3000'
// const App = () => {
//   const [val, setVal] = useState()
//   const [showBottom, setShowBottom] = useState(false)
//   // const woyaode=JSON.parse( localStorage.getItem('recentSearchData')[0].key)
//   // console.log(woyaode);
//   const huxubo=( JSON.parse(localStorage.getItem('recentSearchData'))[0].key);
//   const [typetype, setTypetype] = useState(huxubo )
//   const shangpinzhonglei = ['全部','女装', '母婴', '食品', '电脑', '家电']
//   const [shangpinindex, setShangpinindex] = useState(0)
//   const jiageshabipaixu = ['综合', '价格高', '价格低']
//   const [jiagepaixuindex, setJiagepaixuindex] = useState(0)
//   const [data, setData] = useState([])
//    const sum=data.reduce((sum,item)=>{
//      return sum+item.kucunshuliang
//    },0)
   
//    const [len, setlen] = useState(8)
//      async function getlist() {
//        await axios.get('http://localhost:3000/list?len='+len).then(async res => {
//          setData(res.data.data)
//          setHasMore(res.data.hasMore)
//          if (res.data.hasMore === true) {
//            setlen(len + 5)
//          }})}
//   useEffect(() => {
//     getlist()
//     jiagepaixu()
//   }, [])
//   function getlist() {
//     axios.get('/shangpin?typetype='+typetype).then(res => {
//       console.log(res.data)
//       setData(res.data)
//     })
//   }
//   function tianyi(item, index){
//     setShangpinindex(index)
//     setTypetype(item)
//     getlist()
//   }
//   // 价格排序
//   function jiagepaixu(){
//     const newlist=data.sort((a,b)=>{
//       if(jiagepaixuindex===1){
//         console.log(jiagepaixuindex);
//         return a.price-b.price
//       }else if(jiagepaixuindex===2){
//         console.log(jiagepaixuindex);
//         return b.price-a.price
//       }
//     })
//     setData(newlist)
//   }
//   function dadi(index){
//     setJiagepaixuindex(index)
//     data.reverse()
//   }
 
//   return (
//     <div>
//       <div>
//         <h1 style={{ textAlign: 'left' }}>lativ诚衣</h1>
//         <div>
//           <Input
//             value={val}
//             onChange={(val) => setVal(val)}
//             placeholder="请输入文本"
//           />
//         </div>
//         <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px'}}>
//            {shangpinzhonglei.map((item, index) => {
//              return (
//                <div onClick={() => tianyi(item,index)}>
//                  <span style={{ color: shangpinindex === index ? 'red' : 'black' }}>{item}</span>
//                </div>
//              )
//            })}
//         </div>
//         <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '20px'}}>
//            {jiageshabipaixu.map((item, index) => {
//              return (
//                <div onClick={() => dadi(index)}>
//                  <span style={{ color: jiagepaixuindex === index ? 'red' : 'black' }}>{item}</span>
//                </div>
//              )
//            })}
//         </div>
       
//       </div>

//       <div style={{ display: 'flex',
//       height: '600px',
//       overflow: 'scroll',
//         width: '100%',
//         marginTop: '20px',
        
//       flexWrap: 'wrap', justifyContent: 'space-around'}}>

//           {
//             data.map((item,index) => 
//             (
//             <div 
//              style={{
//               width: '40%',
//              }}
//             key={item._id}>
//               <div> <img src={item.imgSrc} alt="" height={'90px'} width={'90px'} /></div>
//               <div>
//                 <div>{'￥'+item.price}</div>
//                 <div><button
//                  onClick={() => {
//                   setShowBottom(true)
//                   localStorage.setItem('shangpin',JSON.stringify(item))
//                 }}
//                 >购物车</button></div>
//                </div>
            
//             </div>
//             ))
//           }
//       </div>
     
//          <Popup
//         visible={showBottom}
//         position="bottom"
//         onClose={() => {
//           setShowBottom(false)
//         }}
//       > 

//         {console.log(JSON.parse(localStorage.getItem('shangpin')))}
//         <div>
//           <img src={JSON.parse(localStorage.getItem('shangpin')).imgSrc}  height={'100px'} width={'100px'} alt="" srcset="" />
//         </div>
//         <div>
//         <InputNumber defaultValue={JSON.parse(localStorage.getItem('shangpin')).kucunshuliang} allowEmpty />
//         </div>
//          <div style={{background:'gray'}}>
//             确定
//          </div>
//       </Popup>
//       <div>
//         购物车数量{sum}
//       </div>
//       <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
//     </div>
//   );
// }

// export default App;
